<template>
    <div class="orderListRuleForm">
        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
            <el-form-item label="课程名称" prop="coursename">
                <el-input size="mini" placeholder="请输入课程名称" v-model="form.coursename"></el-input>
            </el-form-item>

            <el-form-item label="订单来源" prop="order_from">
                <el-select size="mini" v-model="form.order_from" placeholder="请选择">
                    <el-option v-for="item in orderfrom" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单状态" prop="state">
                <el-select size="mini" v-model="form.state" placeholder="请选择">
                    <el-option v-for="item in orderstate" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-button type="primary" @click="search" size="mini">搜索</el-button>
            <el-button type="success" round @click="add" size="mini">新建</el-button>
            <el-button type="danger" @click="del" size="mini">全部删除</el-button>
            
            </el-form-item>
        </el-form>
        
        <div class="table-wrap">
            <el-table :data="tableData" :loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                stripe default-expand-all>
                <el-table-column prop="order_num" label="群发任务名称"></el-table-column>
                <el-table-column prop="coursename" label="群发内容"></el-table-column>
                <el-table-column prop="fee2" label="通知类型"></el-table-column>
                <el-table-column prop="tel" label="通知时间"></el-table-column>
                <el-table-column prop="nickname" label="通知状态"></el-table-column>
                <el-table-column prop="jieliangzhujiao" label="目标用户数"></el-table-column>
                <el-table-column prop="nick_name" label="实际目标数"></el-table-column>
                <el-table-column prop="order_from" label="已发送用户数"></el-table-column>
                <el-table-column prop="pay_time" label="待发送用户数"></el-table-column>
                <el-table-column prop="create_time" label="操作"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="form.pageSize"
                    background layout="total, sizes, prev, pager, next, jumper" :total="form.total"></el-pagination>
            </div>
        </div>

        <!--弹出层  填写退款原因-->
        <el-dialog v-dialogDrag :visible.sync="open" width="600px" append-to-body title="申请退款">
            <el-form ref="form2" :model="form2"  label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="金额" prop="amount">
                            <el-input type="number" requ v-model="form2.amount" min="0" placeholder="请输入金额"
                                size="small" />
                        </el-form-item>
                        <el-form-item label="退款原因" prop="reason">
                            <el-input type="textarea" v-model="form2.reason" placeholder="请输入内容" size="small" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false" size="small">取 消</el-button>
                <pers-button type="primary" size="small" @click="submitForm('form2')" perms="live:order:refund_on"
                    label="确 定"></pers-button>
            </div>
        </el-dialog>
    </div>


</template>

<script>
    import Panle from '@/components/Panle';
    import {
        getOrderData,
        tuikuan,
        getUserInfo,
    } from '@/api/live/order';
    
    import PersButton from '@/components/PersButton';
    import debounce from '@/common/debounce.js';
    import {
        hasPermission,
        isShow
    } from '@/common/permission';
    import VueJsonExcel from 'vue-json-excel';

    export default {
        components: {
            Panle,
            PersButton,
            VueJsonExcel
        },
        data() {
            return {
                open:false,
                orderfrom:[],
                orderstate:[],
                tableData: [],
                sender:'',
                form: {
                    order_num: '',
                    coursename: '',
                    order_from: '',
                    tel: '',
                    state: '',
                    create_time: [],
                    create_time1: '',
                    create_time2: '',
                    pay_time: [],
                    pay_time1: '',
                    pay_time2: '',
                    pageSize: 10,
                    pageNumber: 1,
                    total: 0,
                    liveId: [],
                    user_name: '',
                    signin_status: '',
                    
                    yiyaoyue: 0,
                    daiyaoyue: 0,
                    wx_name: '',
                    invation_status: '',
                    signin_status: '',
                    planid: '',
                    sender: '',
                    liveId: this.$route.query.liveId,
                    venue: this.$route.query.venue,
                    pageSize: 10,
                    pageNumber: 1,
                    total: 0
                },
                form2: {
                    "id": '',
                    "reason": ''
                },

            }
        },
        created() {
            this.init(true);
        },
        methods: {
            del(){
                
            },
            add(data){
                console.log(data);
                const routeUrl = this.$router.resolve({
                    path: 'invitation',
                    // query: { liveId: 123, venue: 456 }
                });
                // window.open(routeUrl.href, '_blank');
                window.open(routeUrl.href);
            },
            hasPermission,
            isShow,
            init() {
                this.loading = true;
                // console.log('init', this.form);
                // getOrderData(this.form).then((res) => {
                //     console.log(res);
                //     this.tableData = res.data.list;
                //     this.form.total = res.data.total;
                //     this.loading = false;
                // }),
                console.log('init----', this.form);
                
                getUserInfo(this.form).then((res) => {
                    console.log(res);
                     this.sender = res.data.sender;
                     
                //     this.tableData = res.data.list;
                //     this.form.total = res.data.total;
                //     this.sender = res.data.sender;
                //     this.livemanager = res.data.livemanager;
                //     this.planlist = res.data.planlist;
                //     this.renshu = res.data.renshu;
                //     this.renshu_hav = res.data.renshu_hav;
                //     this.usernumbydate = res.data.usernumbydate;
                //     this.usernumbydate_num = res.data.usernumbydate_num;
                //     this.loading = false;
                
                //     if (this.planid == '' && this.planlist.length > 0) {
                //         this.planid = this.planlist[0].id;
                //     }
                
                    // const date1 = new Date(this.livemanager.end_time);
                    // const date2 = new Date();
                    // console.log(date1, date2);
                    // if (date1 <= date2) {  //已经关闭
                    //     this.showAdd = true;
                    // }
                })
                
            },
            
            search: function() {
                this.loading = true;
                this.form.pageSize = 10;
                this.form.pageNumber = 1;
                this.init();
            },
            handleSizeChange: function(e) {
                console.log(e);
                this.form.pageSize = e;
                this.init();
            },
            handleCurrentChange: function(e) {
                console.log(e);
                this.form.pageNumber = e;
                this.init();
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.form.liveId = []
                this.form.state = ''
                this.form.user_name = ''
                this.form.signin_status = ''
                this.init();
            },
            tuikuan: function(e) {

                this.form2 = {
                        "id": e.id,
                        "reason": e.reason
                    },
                    this.open = true;

            },
            submitForm(e) {
                debounce(() => {
                    this.$refs[e].validate((valid) => {
                        if (!valid) return false;
                        tuikuan(this.form2).then((res) => {
                            // console.log(res)
                            if (res.code == 200) {
                                this.msgSuccess(res.msg);
                                this.init();
                                this.open = false;
                            } else {
                                this.msgError(res.msg);
                            }
                        })

                    })

                }, 1000)

            }
        }
    }
</script>

<style lang="scss" scoped>
    .demo-form-inline {
        margin: 20px;

        .el-form-item {
            margin-bottom: 0;
        }
    }

    .el-form--inline .el-form-item {
        display: inline-block;
        vertical-align: top;
    }

    .orderListRuleForm .el-form-item {
        margin-bottom: 0;
    }

    .search-content {
        width: 100%;
        margin: 20px;
    }
</style>